<!--  -->
<template>
  <div class='headers'>
    其他{{this.$store.state.clickWhich}}22

    
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
      Submit
    </button>
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">Jacasdk</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
    <!--  -->
    <navs></navs>
  </div>
</template>

<script>
  import navs from '../navs.vue';
  export default {
    components: {
      navs
    },
    name: '',
    data() {
      //这里存放数据
      return {
         checkedNames: [],
        datas: {
          age: "18",
          xes: "男",
          naem: "ihje",
        },
        sets: [
          [1, 2, 3, 4, 5],
          [6, 7, 8, 9, 10]
        ],

        name: [{
            age: "18"
          },
          {
            age: "15"
          }
        ],
        object: {
          title: 'How to do lists in Vue',
          author: 'Jane Doe',
          publishedAt: '2016-04-10'
        }


      };
    },
    methods: {
      warn(message, event) {
        // 现在我们可以访问原生事件对象
        if (event) {
          event.preventDefault()
        }
        console.log(event)
        alert(message)
      }

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    //方法集合
    // methods: {

    // },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //beforeCreate() {}, //生命周期 - 创建之前
    //beforeMount() {}, //生命周期 - 挂载之前
    //beforeUpdate() {}, //生命周期 - 更新之前
    //updated() {}, //生命周期 - 更新之后
    //beforeDestroy() {}, //生命周期 - 销毁之前
    //destroyed() {}, //生命周期 - 销毁完成
    //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style lang='' scoped>
  /* @import url(); 引入公共css类 */

</style>
